<!--
 * @Description  : 分页
 * @Author       : zhao
 * @Date         : 2022-06-28 11:16:18
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-04 10:57:23
-->

<template>
    <div class="">
        <el-pagination
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="$store.state.table.searchData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="$store.state.table.searchData.pageSize"
            :layout="PaginationData.layout"
            :total="PaginationData.total"
            :background="PaginationData.isbackground"
            :pager-count="5"
            :small="small"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "pagination",
    data() {
        return {
            currentPage: 1,
            PaginationData: {},
            pageIndex: 1,
            pagesize: 10,
        }
    },

    components: {},
    props: {
        small: {
            type: Boolean,
            default: false,
        },
    },
    computed: {},
    watch: {
        // "$store.state.table.searchData.pageIndex": {
        //     handler: (val, oldVal) => {
        //         this.pageIndex = val
        //     },
        //     immediate: true,
        //     deep: true,
        // },
        // "$store.state.table.searchData.pageSize": {
        //     handler: (val, oldVal) => {
        //         this.pageSize = val
        //     },
        //     immediate: true,
        //     deep: true,
        // },
        pageIndex(val) {
            this.$store.state.table.searchData.pageIndex = val
        },
        pageSize(val) {
            this.$store.state.table.searchData.pageSize = val
        },
    },
    mounted() {
        this.PaginationData = this.$store.state.table.PaginationData
        this.$nextTick(() => {
            this.$refs.pagination.internalCurrentPage = this.$store.state.table.searchData.pageIndex
        })
    },

    methods: {
        handleSizeChange(val) {
            this.$store.state.table.searchData.pageIndex = 1
            this.$store.state.table.searchData.pageSize = val
            this.$store.dispatch("table/getTableData")
        },
        handleCurrentChange(val) {
            this.$store.state.table.searchData.pageIndex = val
            this.$store.dispatch("table/getTableData")
        },
    },
}
</script>
<style lang='scss' scoped>
</style>